<template>
  <div class="form-table-item">
    <f-form-layout ref="form" :columns="columns" :model="model">
    </f-form-layout>
    <f-button @click="columns[1].props!.useRemove = false">
      隐藏删除按钮
    </f-button>
    <f-button @click="columns[1].props!.useAdd = false">隐藏新增按钮</f-button>
    <f-button @click="model.list!.push({ id: 'key' + Date.now() })">
      model增加行
    </f-button>
    <f-button @click="columns[1].props!.fixed = [3, 4]">
      固定两侧(左3右4)
    </f-button>
    <f-button @click="submit">提交</f-button>
  </div>
</template>
<script setup lang="ts">
import { Button, Modal, message } from "ant-design-vue";
import { h, ref, watch } from "vue";
const columns = ref([
  {
    label: "基础信息",
    columns: [
      {
        label: "字段1",
        field: "f1",
        type: "dictionary",
        required: true,
        props: {
          code: "invoiceMode",
        },
        span: 8,
      },
      { label: "字段1", field: "f2", required: true, span: 8 },
      { label: "字段1", field: "f3", span: 8 },
      { label: "字段1", field: "f4", span: 8 },
      { label: "字段1", field: "f5", span: 8 },
      { label: "字段1", field: "f6", span: 8 },
    ],
  },
  {
    field: "list",
    type: "form-edit-table",
    props: {
      title: "表格编辑",
      useAdd: true,
      multiple: false,
      useRemove: true,
      fixed: [2, 1],
      maxHeight: 500,
      tableSlots: {
        toolbar_right: ({ checkedRowKeys }) => [
          h("div", { class: "mr10" }, "kdjfksdajlf"),
          h(
            Button,
            {
              class: "mr10",
              onClick: () =>
                Modal.info({
                  title: "提示",
                  content: "已选择" + checkedRowKeys.value.length + "条数据",
                }),
            },
            { default: () => "外部按钮" }
          ),
        ],
      },
      columns: [
        {
          title: "name",
          field: "name",
          type: "expand",
          width: 300,
          render: ({ $grid, row }) =>
            h(
              "a",
              {
                onClick: () => {
                  // 用于控制，是否展开。配置toggleMethod
                  row.allowExpand = true;
                },
              },
              "点击展开"
            ),
          expandConfig: () => ({
            toggleMethod: ({ row }) => row.allowExpand,
          }),
          renderExpand: ({ row }) =>
            h("div", { class: "my12 mx12" }, `我是展开内容:${row.like}`),
        },
        {
          title: "code",
          field: "code",
          editType: "input",
          width: 200,
        },
        {
          title: "分组",
          children: [
            {
              width: 300,
              editType: "input",
              required: true,
              title: "height1",
              field: "height1",
              props: ({ row }) => ({
                onChange: (e) => {
                  row.height2 = e.target.value;
                },
              }),
            },
            {
              width: 300,
              title: "height2",
              field: "height2",
              editType: "input",
              required: ({ row }) => row.height1 == 100,
            },
            {
              width: 300,
              title: "height3",
              field: "height3",
              render: ({ row }) => "cascade:" + row.code,
            },
            { width: 300, title: "height", field: "height4" },
            { width: 300, title: "height", field: "height5" },
            {
              width: 300,
              title: "height5",
              field: "height6",
            },
          ],
        },
        {
          width: 300,
          required: true,
          editType: "input",
          title: "like",
          field: "like",
          onChange: ({ row, value }) => {
            // row为当前行的数据，可以直接修改
            row.love = "xxx-" + value;
          },
        },
        {
          width: 300,
          required: true,
          editType: "input",
          title: "love",
          field: "love",
        },
        {
          width: 300,
          required: ({ row }) => row.like == "100",
          editType: "input",
          title: "add",
          field: "add",
        },
        {
          width: 300,
          required: true,
          editType: "select",
          props: {
            options: [
              { label: "选项1", value: "1" },
              { label: "选项2", value: "2" },
              { label: "选项3", value: "3" },
            ],
          },
          title: "country",
          field: "country",
        },
      ],
    },
  },
]);
const form = ref();
const model = ref<any>({});
watch(
  model,
  (value) => {
    console.log("model change", { ...value });
  },
  { deep: true }
);
function submit() {
  form.value.validate();
}
setTimeout(() => {
  model.value = { f1: 21233 };
  model.value.list = [
    {
      id: "12312312",
      name: "123213213123",
      code: "12312312312",
      height1: "12312312312",
      height2: "12312312312",
      height3: "12312312312",
      height4: "12312312312",
      height5: "12312312312",
      height6: "12312312312",
      like: "12312312312",
      love: "12312312312",
      add: "12312312312",
      country: "12312312312",
    },
  ];
  model.value.f1 = 123123;
}, 1000);
</script>
